import React from 'react';
import { toJS } from 'mobx';
import { inject, observer } from 'mobx-react';
import { withRouter } from 'react-router-dom';
import { Icon, Tools, Tag, Popover, Modal } from 'weaver-mobile';
import { getFontColorFromBgHex } from '../../../util'
import { renderOver, renderEnd, renderHide } from '../../public'
import { openHrmCard } from '../../../util';
const getLabel = Tools.getLabel;
const alert = Modal.alert;

@withRouter
@inject('communicationStore')
@observer
export default class DetailHeader extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      visible: false,
    }
  }

  // 星标
  isImportant = () => {
    const { communicationStore: { detailStore, updateListData } } = this.props;
    const { isImportant, coworkMarkItemAsType, coworkId } = detailStore;
    if (isImportant) {
      coworkMarkItemAsType('normal');
      updateListData( coworkId, {important: '0'});
    } else {
      coworkMarkItemAsType('important');
      updateListData( coworkId, {important: '1'});
    }
  }
  
  popoverClick = (event) => {
    event.stopPropagation();
  }

  onSelect=(opt,index)=>{
    const { communicationStore: { detailStore, getCoworkList, coworkListStore }, location: { pathname }, history } = this.props;
    const { invitedBrowser, detailHeader } = detailStore;
    if (opt.key === "close") {//结束协作
      detailStore.batchCoworkItemMonitorEnd();
      detailStore.setStoreState({coworkStatus:"2"});
      this.setState({visible:false});
    } else if (opt.key === "open") {//重新打开
      detailStore.coworkItemOperation();
      detailStore.setStoreState({coworkStatus:"1"});
      this.setState({visible:false});
    } else if (opt.key === "4") {  // 编辑协作
      history.push(`${pathname}/edit?id=${detailStore.coworkId}`)
    } else if (opt.key === 'quit') { // 退出协作
      this.setState({visible: false}, () => {
        let curModal = alert(getLabel('513247','确定要退出协作吗？') , getLabel('513251','注意：退出后需联系管理员进行操作后才可再次加入'), [
          { text: getLabel(31129, '取消') },
          { text: getLabel(33703, '确认'), onPress: () => {
            detailStore.quitCowork(() => {
              coworkListStore.clearData();
              getCoworkList(); 
              history.go(-1);
            })
          }}
        ])
        detailStore.setStoreState({currentModel: curModal})
      })
    } else if (opt.key === 'invite') { // 邀请加入
      history.push(invitedBrowser.path)
    } else if (opt.key === 'mark') {
      history.push({ 
        pathname: `${pathname}/tag`, 
        state: {id: detailStore.coworkId, page: 'view', labelList: toJS(detailHeader.labelBycoworkList) } 
      })
    }
  }

  overlay = () => {
    const { canEdit, canQuit, canInvite, communicationStore: { detailStore } } = this.props;
    const { coworkStatus } = detailStore;
    let overlay = [];
    if (canEdit) {
      overlay.push(<Popover.Item key="4" value="scan">{getLabel(83251,"编辑协作")}</Popover.Item>)
      if (coworkStatus === "2") {
        overlay.push(<Popover.Item key="open" >{getLabel(244,"重新打开")}</Popover.Item>)
      } else {
        overlay.push(<Popover.Item key="close" >{getLabel(390699,"结束协作")}</Popover.Item>)
      }
    }
    if (canInvite && canInvite * 1 === 1) {
      overlay.push(<Popover.Item key="invite">{getLabel('516505','邀请加入') }</Popover.Item>)
    }
    if (canQuit) {
      overlay.push(<Popover.Item key="quit" >{getLabel('513402','退出协作')}</Popover.Item>)
    }
    overlay.push(<Popover.Item key="mark" >{getLabel('30929','标记为')}</Popover.Item>)
    return overlay;
  }

  render() {
    const name = 'detail';
    const { info, label, isLabel, communicationStore: { detailStore } } = this.props;
    const { over, isCoworkHiddened } = detailStore;
    let overlay = this.overlay();
    let { visible } = this.state;
    let choose = (event) => {
      event.stopPropagation();
      this.isImportant()
    };
    return (
      <div className={`${name}-header`}>
        <div className={`${name}-header-title`}>
          <span className={`${name}-header-title-name`}>{info && info.name} {over === '1' && renderOver} {info && info.status === '2' && renderEnd} {isCoworkHiddened * 1 === 1 && renderHide}</span>
          <div className={`${name}-header-title-icon`}>
            <span className={`${name}-header-title-xing`} onClick={choose}>{
              isLabel ? <Icon type='blog-xing' size='xs' color='#f6a623'/> : <Icon type='collection' size='xs' color='#B2B2B2'/>
            }</span>
            <span onClick={this.popoverClick}>
              <Popover
                visible={visible}
                mask
                overlay={overlay}
                onSelect={(v,index) => this.onSelect(v,index)}
              >
                <span className={`${name}-header-title-popover`}>
                  <Icon type='ellipsis' color='#A1A1A1'/>
                </span>
              </Popover>
            </span>
          </div>
        </div>
        <div className={`${name}-header-tags`}>
          {label && label.length !== 0 && label.map((item => {
            return <Tag key={item.id} style={{color: item.labelColor === '' ? '#333' : getFontColorFromBgHex(item.labelColor), background: item.labelColor}}>{item.labelName}</Tag>
          }))}
        </div>
        <div className={`${name}-header-info`}>
          <span className={`${name}-header-princ`} >{getLabel(2097, '负责人')}：</span>
          {
            info && info.principalInfo && info.principalInfo.map(principal => (
              <span style={{ color:'#55B1F9',marginRight:'10px',}} onClick={(event) => { event.stopPropagation(); openHrmCard(principal.id)}}>{principal.lastname}</span>
            ))
          }
          <span>{getLabel(83209,'版块')}：{info && info.coworkBelongToTypeName}</span>
        </div>
        <div className={`${name}-header-time`}>
          <span className={`${name}-header-start`}>{getLabel(1339, '创建时间')}：{info && info.createdate} {info && info.createtime}</span>
          {info && info.enddate && (
            <span>{getLabel(743,'结束时间')}：{info && info.enddate} {info && info.endtime}</span>
          )}
        </div>
      </div>
    )
  }
}